<!-- 余额弹窗 -->
<template>
	<view class="balance-popup">
		<cl-popup direction="center" :visible.sync="show">
			<view class="balance__content">
				<view class="title">当前余额不足</view>
				<view class="money">余额：{{ bwbt_userInfo.subsidiesAmount }}元</view>
				<view class="btn share" v-if="bwbt_userInfo.remaining > 0" @click="share">分享好友，再刮1次</view>
				<view class="btn do" v-else @click="show = false">我知道了</view>
			</view>
		</cl-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import ClPopup from '@/components/popup';

export default {
	components: {
		ClPopup
	},
	data() {
		return {
			show: false
		};
	},
	computed: {
		...mapGetters(['bwbt_userInfo'])
	},
	methods: {
		open() {
			this.show = true;
		},
		close() {
			this.show = false;
		},
		share() {
			this.close();
			this.$emit('share');
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.cl-popup {
	background-color: transparent;
	&__container {
		padding: 0;
	}
}
.balance__content {
	border-radius: 16px;
	background-color: #f24e36;
	padding: 30px;

	.title,
	.money {
		text-align: center;
		color: #fae480;
	}
	.title {
		font-size: 30px;
		margin-bottom: 30px;
	}
	.money {
		font-size: 34px;
	}
	.btn {
		width: 400px;
		height: 80px;
		line-height: 80px;
		text-align: center;
		color: #f24938;
		margin: 0 auto;
		margin-top: 50px;
		border-radius: 50px;
		font-size: 28px;
	}
	.share {
		background-image: linear-gradient(to bottom, #ffed93, #fdb626);
	}
	.do {
		border: 2px solid #fc9481;
		color: #ffd1a3;
	}
}
</style>
